<template>
  <div class="package-detail">
    <el-form ref="form" :model="assets" label-width="100px">
      <el-form-item label="课程包封面">
        <img v-if="assets.coverUrl" :src="assets.coverUrl" alt>
        <img v-if="!assets.coverUrl" src="../../../../../assets/subjectImg.png" alt>
        <br>
        <el-upload
          :on-change="handleChange"
          :http-request="uploadFile"
          :limit="1"
          class="upload-demo"
          action=""
        >
          <el-button slot="trigger" size="small" type="primary" style="margin-top:10px;">选择封面</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，图片建议不要超过480*270，且不超过500kb</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="课程包简介">
        <el-input
          v-model="assets.description"
          :rows="6"
          type="textarea"
          placeholder="输入课程描述"
          style="width:500px;"
        />
        <p style="margin:0;color:#8a8a8a">注:课程包简介最多输入120个字</p>
      </el-form-item>
      <el-form-item label="课程包详情">
        <div style="width:580px;">
          <tinymce :height="250" :show="true" v-model="assets.memo"/>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button @click="backStep">上一步</el-button>
        <el-button type="primary" @click="nextStep">保存并发布</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </el-form-item>
    </el-form>
    <img-dialog :visible-dialog="dialog" @closeDialog="handleClose"/>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'
import imgDialog from './packagedetail/dialog'
import { pushMessageBus } from './eventbus'
import { addDigitalAssets } from '@/api/subject/digitalAssets' // 接口
import { upLoadFile } from '@/api/upLoadFile' // 数据接口
import { getTenantId, getUserId, getUserName } from '@/utils/auth'
export default {
  components: {
    Tinymce,
    imgDialog
  },
  props: {
    assets: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      dialog: false,
      file: ''
    }
  },
  mounted() {
    // 接收来自upload组件的select动作
    pushMessageBus.$on('fromUpload-selected', (value) => {
      this.assets.coverUrl = value.url
      this.dialog = false
    })
    // 接收来自history组件的select动作
    pushMessageBus.$on('fromHistory-selected', (value) => {
      this.assets.coverUrl = value.url
      this.dialog = false
    })
  },
  methods: {
    nextStep() {
      if (!this.assets.id) {
        this.assets.tenantId = getTenantId()
        this.assets.creator = getUserName()
        this.assets.belongUserId = getUserId()
        this.assets.belongUserName = getUserName()
      }
      addDigitalAssets(this.assets).then(res => {
        this.$router.push('/classpackage/merchant')
      })
    },
    backStep() {
      this.$emit('back', this.assets)
    },
    handleCancel() {
      this.$router.go(-1)
    },
    handleClose() {
      this.dialog = false
    },
    handleChange(file) {
      this.file = file.raw
    },
    uploadFile() {
      const fileForm = new FormData()
      fileForm.append('name', this.file.name)
      fileForm.append('uid', this.file.uid)
      fileForm.append('file', this.file)
      upLoadFile(fileForm).then(response => {
        this.assets.coverUrl = response.data.url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.package-detail {
  .el-form {
    margin-top: 30px;
  }
}
</style>
